<template>
	<view class="pages">
		<view class="page-section">
			<map class="page-section" :latitude="latitude" :longitude="longitude" :scale="12" :markers="covers"></map>
			<view class="heads">
				<view class="uniFlex h1" @click="chooseLocation">
					<img class="img1" src="@/static/index/i4.png" alt="" />
					<view class="name">{{ address }}</view>
					<img class="img2" src="@/static/index/i5.png" alt="" />
				</view>
				<!-- <view class="h2">
					<u--input
						@confirm="handleinput"
						@clear="handleclear"
						style="background-color: #fff"
						placeholder="销售点/售后点"
						prefixIcon="search"
						shape="circle"
						:clearable="true"
						v-model="search"
						prefixIconStyle="font-size: 22px;color: #949292;"
					></u--input>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
import QQMapWX from '@/common/qqmap/qqmap-wx-jssdk.js';
var qqmapsdk;
export default {
	data() {
		return {
			search: '',
			longitude: '115.360721',
			latitude: '33.287242',
			address: '选择地址',
			covers: []
		};
	},
	onLoad() {},
	mounted() {
		qqmapsdk = new QQMapWX({
			key: 'L5SBZ-DFVWB-YT2UJ-NOARZ-Z63IE-LQBX5' //这里自己的key秘钥进行填充
			// key: 'APWBZ-QS7WI-7DLGX-UGZ2E-YI625-A3FBZ' //这里别的项目的尽量别用
		});
		this.config();
		this.getLocation();
	},
	methods: {
		clickmap(e) {
			console.log(e.markerId);
		},
		// 搜索
		handleinput(e) {
			console.log(this.search);
			this.latitude = 24.28024;
			this.longitude = 100.997477;
		},
		// 清空
		handleclear() {
			console.log('清除');
			this.search = '';
		},
		// 打开地图选择位置
		chooseLocation() {
			let that = this;
			uni.chooseLocation({
				success: function (res) {
					that.covers = [];
					that.config();
					
					that.address = res.address;
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					// console.log('位置名称：' + res.name);
					// console.log('详细地址：' + res.address);
					// console.log('纬度：' + res.latitude);
					// console.log('经度：' + res.longitude);
					that.getList(res.latitude,res.longitude)
				}
			});
		},
		async getData() {
			let that = this;
			// that.getLocation();
			// that.$forceUpdate(); //强制组件更新
		},
		async config(){
			let res = await this.$api.config();
			if(res.code == 1){
				this.covers.push({
					id: 1.1,
					latitude: res.data.website.lat,
					longitude: res.data.website.lng,
					iconPath: '../../static/index/i3.png',
					width: 50,
					height: 37.5,
					callout: {
						color: '#000000',
						display: 'ALWAYS', //'BYCLICK':点击显示; 'ALWAYS':常显
						bgColor: '#ffffff',
						fontSize: 12,
						textAlign: 'center',
						borderRadius: 5,
						padding: 10,
						content:
							'名称:'+res.data.website.cname + '\n' + 
							'电话:'+res.data.website.tel + '\n' + 
							'简介:'+res.data.website.content + '\n' + 
							'地址:'+res.data.website.address
					}
				})
			}
		},
		async getList(lat,lng){
			let that = this;
			let res = await this.$api.shops({lng:lat,lat:lng,province:'',city:'',area:'',title:'',});
			if(res.code == 1){
				// console.log(res.data)
				res.data.forEach((item) => {
					if(item.type==1){
						that.covers.push({
							id: item.id,
							latitude: item.lat,
							longitude: item.lng,
							iconPath: '../../static/index/i1.png',
							width: 35,
							height: 38,
							callout: {
								color: '#000000',
								display: 'BYCLICK', //'BYCLICK':点击显示; 'ALWAYS':常显
								bgColor: '#ffffff',
								fontSize: 12,
								textAlign: 'center',
								borderRadius: 5,
								padding: 10,
								content: item.address
							}
						})
					}else{
						that.covers.push({
							id: item.id,
							latitude: item.lat,
							longitude: item.lng,
							iconPath: '../../static/index/i2.png',
							width: 35,
							height: 38,
							callout: {
								color: '#000000',
								display: 'BYCLICK', //'BYCLICK':点击显示; 'ALWAYS':常显
								bgColor: '#ffffff',
								fontSize: 12,
								textAlign: 'center',
								borderRadius: 5,
								padding: 10,
								content: item.address
							}
						})
					}
				})
			}
		},
		getLocation() {
			let that = this;
			uni.getFuzzyLocation({
				type: 'wgs84',
				success(res) {
					// console.log(res.latitude, res.longitude);
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					that.getList(res.latitude,res.longitude)
					// that.getLocal(res.latitude,res.longitude)
				}
			});
		},
		// // 获取当前地理位置
		// getLocal: function (latitude, longitude) {
		// 	let that = this;
		// 	qqmapsdk.reverseGeocoder({
		// 		location: {
		// 			latitude: latitude,
		// 			longitude: longitude
		// 		},
		// 		success: function (res) {
		// 			// let city = res.result.ad_info.city;
		// 			// console.log(res.result)
		// 			// console.log(res.result.address_component.street_number);
		// 			that.address = res.result.address_component.street_number;
		// 		},
		// 		fail: function (res) {
		// 			// console.log(11111, res);
		// 			uni.showToast({
		// 				title: res.message,
		// 				duration: 5000,
		// 				icon: 'none'
		// 			});
		// 		},
		// 		complete: function (res) {
		// 			// console.log(res);
		// 		}
		// 	});
		// }
	}
};
</script>

<style scoped lang="scss">
.pages {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.page-section {
	width: 100%;
	height: calc(100vh - 160rpx);
	position: relative;
	z-index: 1;

	.heads {
		position: absolute;
		top: 128rpx;
		left: 20rpx;
		right: 20rpx;
		z-index: 2;

		.h1 {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 800;
			margin-bottom: 15rpx;
			color: #000000;
			.img1 {
				width: 30rpx;
				height: 32rpx;
			}
			.name {
				margin: 0 10rpx;
			}
			.img2 {
				width: 21rpx;
				height: 15rpx;
			}
		}
		.h2 {
			background: #fff;
			border-radius: 50rpx;
		}
	}
}
</style>
